﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商管理</title>
    <!-- 引入 Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 页面整体背景 */
        body {
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
        }

        .container {
            width:1200px;
            height:600px;
            margin-left: 20px; /* 左侧导航的宽度，使主体在右侧固定 */
            margin-top: 20px;
            background-color: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            padding: 24px;
        }

        .search-area {
            margin-bottom: 16px;
            padding: 16px;
            background-color: #f5f7fa;
            border-radius: 4px;
        }

        .btn-group {
            margin-bottom: 16px;
            display: flex;
            gap: 8px;
        }

        .table-container {
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        .searchForm-industry,
        .searchForm-status{
            width: 100px;
        }

        @@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* 表头样式：灰色背景 + 加粗文字 */
        .el-table__header th {
            background-color: #f0f2f5 !important;
        }

        .el-table__header .el-table__header-cell .cell {
            font-weight: bold !important;
        }
    </style>
</head>
<body>
    <!-- 应用容器 -->
    <div id="supplier-app" class="container fade-in">
        <!-- 搜索区域 -->
        <div class="search-area">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="供应商">
                    <el-input v-model="searchForm.supplier" placeholder="请输入供应商名称/编号"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" class="searchForm-status" placeholder="请选择">
                        <el-option label="启用" value="启用"></el-option>
                        <el-option label="禁用" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属行业" class="form-item">
                    <!-- v-model 绑定表单中“所属行业”的选中值 -->
                    <el-select v-model="searchForm.industry" class="searchForm-industry" placeholder="请选择">
                        <el-option v-for="item in industryOptions"
                                   :key="item.value"
                                   :label="item.dictLabel"
                                   :value="item.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="进货负责人">
                    <el-input v-model="searchForm.manager" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleSearch">查询</el-button>
                    <el-button v-on:click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 功能按钮区域 -->
        <div class="btn-group">
            <el-button type="primary" v-on:click="handleAdd">新增</el-button>
            <el-button v-on:click="handleDelete">删除</el-button>
            <el-button v-on:click="handleCopy">复制</el-button>
            <el-button v-on:click="handleExport">导出</el-button>
            <el-button v-on:click="handleImport">导入</el-button>
            <el-button v-on:click="handleRefresh">刷新</el-button>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="code" label="供应商编号" width="160" fixed="left">
                    <template #default="scope">
                        <span v-on:click ="handleDetail(scope.row)" style="cursor: pointer; color: #409EFF;">
                            {{ scope.row.code }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="供应商" width="120" fixed="left"></el-table-column>
                <el-table-column prop="industry" label="所属行业" width="120"></el-table-column>
                <el-table-column prop="category" label="供应商分类" width="120"></el-table-column>
                <el-table-column prop="contact" label="联系人" width="120"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
                <el-table-column prop="email" label="电子邮箱" width="180"></el-table-column>
                <el-table-column prop="dept" label="进货部门" width="120"></el-table-column>
                <el-table-column prop="manager" label="进货负责人" width="120"></el-table-column>
                <el-table-column prop="status" label="状态" width="100"></el-table-column>
                <el-table-column prop="address" label="供应商地址" width="300"></el-table-column>
                <el-table-column prop="accountName" label="账户名称" width="220"></el-table-column>  
                <el-table-column prop="taxid" label="纳税人识别号" width="220"></el-table-column>    
                <el-table-column prop="bankAccount" label="银行账户" width="220"></el-table-column>  
                <el-table-column prop="openingBank" label="开户银行" width="220"></el-table-column>  
                <el-table-column prop="bankAddress" label="开户行地址" width="220"></el-table-column>
                <el-table-column prop="createBy" label="操作人" width="160"></el-table-column>       
                <el-table-column prop="createTime" label="操作时间" width="300"></el-table-column>   
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" v-on:click="handleEdit(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" v-on:click="handleDeleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <div style="margin-top: 16px; text-align: right;">
                <el-pagination v-model:current-page="currentPage"
                               v-model:page-size="pageSize"
                               :page-sizes="[5, 10, 20, 50]" 
                               :total="total"                 
                               layout="total, sizes, prev, pager, next, jumper"
                               @@size-change="handlePageSizeChange" 
                               @@current-change="handleCurrentPageChange"  
                ></el-pagination>
            </div>
        </div>
    </div>

    <!-- 引入 Vue 和 Element Plus JS -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const app = createApp({
            setup() {

                // 1. 分页相关响应式数据
                const currentPage = ref(1);    // 当前页码（默认第1页）
                const pageSize = ref(10);      // 每页条数（默认10条）
                const total = ref(0);          // 总条数（从接口获取）

                // 2. 搜索表单数据、
                const searchForm = reactive({
                    supplier: '',
                    status: '',
                    industry: '',
                    manager: ''
                });

                // 3. 表格数据
                const tableData = ref([]);

                const industryOptions = ref([]); // 所属行业的字典选项

                // 4. 获取“所属行业”字典数据
                const getIndustryDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/Industry');
                        industryOptions.value = response.data;
                    } catch (error) {
                        console.error('获取所属行业字典失败：', error);
                        ElementPlus.ElMessage.error('获取所属行业数据失败，请稍后再试');
                    }
                };

                // 6. 核心：加载供应商分页数据
                const loadSupplierData = async () => {
                    try {
                        // 构造请求参数（包含搜索条件和分页参数）
                        const params = {
                            supplierName: searchForm.supplier,
                            status: searchForm.status === '启用' ? '1' : (searchForm.status === '禁用' ? '2' : null),
                            industryId: searchForm.industry || null,
                            managerName: searchForm.manager,
                            currentPage: currentPage.value,
                            pageSize: pageSize.value
                        };

                        // 调用后端分页接口
                        const response = await axios.get('/Supplier/GetSupplierList', { params });

                        if (response.data.success) {
                            tableData.value = response.data.data;  // 绑定当前页数据
                            total.value = response.data.total;     // 更新总条数
                        } else {
                            ElementPlus.ElMessage.error(response.data.message);
                        }
                    } catch (error) {
                        console.error('加载供应商数据失败：', error);
                        ElementPlus.ElMessage.error('加载数据失败，请稍后再试');
                    }
                };
                // 7. 搜索按钮事件（触发重新加载数据）
                const handleSearch = () => {
                    currentPage.value = 1;  // 搜索时重置到第1页
                    loadSupplierData();     // 加载数据
                };

                // 8. 重置按钮事件
                const handleReset = () => {
                    searchForm.supplier = '';
                    searchForm.status = '';
                    searchForm.industry = '';
                    searchForm.manager = '';
                    currentPage.value = 1;  // 重置到第1页
                    loadSupplierData();     // 重新加载数据

                };

                // 9. 分页事件：每页条数变化时
                const handlePageSizeChange = (newSize) => {
                    pageSize.value = newSize;
                    loadSupplierData();  // 重新加载当前页数据
                };

                // 10. 分页事件：页码变化时
                const handleCurrentPageChange = (newPage) => {
                    currentPage.value = newPage;
                    loadSupplierData();  // 加载新页数据
                };

                // 11. 刷新按钮事件
                const handleRefresh = () => {
                    loadSupplierData();  // 重新加载当前页数据
                };

                // 12. 其他方法（保持不变）
                const handleAdd = () => { window.location.href = "/Supplier/AddPage"; };
                const handleDelete = () => { console.log('批量删除'); };
                const handleCopy = () => { console.log('复制供应商'); };
                const handleExport = () => { console.log('导出数据'); };
                const handleImport = () => { console.log('导入数据'); };

                //点击供应商编号跳转到详情页面
                const handleDetail = (row) => {  
                    const supplierCode = row.code;
                    window.location.href = `/Supplier/DetailsPage?code=${supplierCode}`; 
                };

                const handleEdit = (row) => {
                    const supplierCode = row.code;
                    window.location.href = `/Supplier/EditPage?code=${supplierCode}`;
                };

                // 单条删除
                const handleDeleteRow = async (row) => {
                    try {
                        // 弹出确认对话框
                        const confirmResult = await ElementPlus.ElMessageBox.confirm(
                            `确定要删除供应商【${row.name}】吗？`,
                            "删除确认",
                            {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning"
                            }
                        );

                        if (confirmResult === "confirm") {
                            // 调用后端删除接口
                            const response = await axios.post("/api/Supplier/Delete", null, {
                                params: { supplier_code: row.code } // 传递供应商编码
                            });

                            if (response.data.success) {
                                ElementPlus.ElMessage.success("删除成功");
                                loadSupplierData(); // 刷新表格数据
                            } else {
                                ElementPlus.ElMessage.error(response.data.message);
                            }
                        }
                    } catch (error) {
                        // 如果用户取消删除，error为"cancel"，不处理；否则提示错误
                        if (error !== "cancel") {
                            console.error("删除失败：", error);
                            ElementPlus.ElMessage.error("删除失败，请重试");
                        }
                    }
                };


                // 组件挂载时主动调用接口（新增）
                onMounted(() => {
                     getIndustryDict();
                     loadSupplierData();
                });

                

                return {
                    searchForm,
                    tableData,
                    handleSearch,
                    handleReset,
                    handleAdd,
                    handleDelete,
                    handleCopy,
                    handleExport,
                    handleImport,
                    handleRefresh,
                    handleDetail,
                    handleEdit,
                    handleDeleteRow,
                    industryOptions, // 所属行业字典选项
                    currentPage,    // 当前页码
                    pageSize,       // 每页条数
                    total,          // 总条数
                    handlePageSizeChange, // 每页条数变化事件
                    handleCurrentPageChange // 页码变化事件
                };
            }
        });
        app.use(ElementPlus);
        app.mount('#supplier-app');
    </script>
</body>
</html>